<template>
	<div class="modal">
	    <div class="modal-dialog" :style="`width:${width};margin-top:${top};`">
	      <div class="modal-content" :style="`height:${height};`">
	        <div class="modal-header">
	          <h2 style="display: inline; opacity: .7;"><Icon type="social-tux"></Icon>&nbsp;{{title}}</h2>
	          <span class="close" @click="closeModal"><Icon size="22" type="close-round"></Icon></span>
	        </div>
	        <div class="modal-body">
	          <slot name="body"></slot>
	        </div>
	      </div>
	    </div>
	</div>
</template>

<script>
  export default {
    props:{
	    title: {
	        type: String,
	        default() {return 'title';}
	    },
	    width: {
	        type: String,
	        default() {return '800px';}
	    },
	    height: {
	        type: String,
	        default() {return '80%';}
	    },
	    top: {
	        type: String,
	        default() {return '150px';}
	    }
    },
    created(){
		    
	},
    methods:{
      closeModal(){
        this.$emit('closeModal');
      }
    }
  }
</script>

<style scoped>
  .modal {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 3550;
    outline: 0;
  }
  .modal-dialog {
    height: 100%;
  }
  .modal-content {
    height: 80%;
    position: relative;
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
  }
  .modal-header {
    margin: 8px 8px 6px;
    border-bottom: 1px solid #e5e5e5;
  }
  .close {
    float: right;
    opacity: .3;
    cursor: pointer;
  }
  .modal-body {
    position: absolute;
    padding: 10px 15px;
    width: 100%;
    top: 36px;
    bottom: 0;
    overflow-x: auto;
  }
</style>
